{% extends 'base_tabler.html' %} {% block navname %}fashion{% endblock %} {% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">青少年时尚偏好分析</h2>
        <div class="text-muted mt-1">基于调查数据的青少年时尚偏好与购物习惯分析</div>
      </div>
    </div>
  </div>
</div>

<!-- 品牌偏好与购物习惯 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">品牌偏好分析</h3>
      </div>
      <div class="card-body">
        <div id="brand_chart" style="width: 100%; height: 400px">{{ brand_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">购物频率分布</h3>
      </div>
      <div class="card-body">
        <div id="shopping_chart" style="width: 100%; height: 400px">{{ shopping_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 时尚风格偏好 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">时尚风格偏好</h3>
      </div>
      <div class="card-body">
        <div id="style_chart" style="width: 100%; height: 400px">{{ style_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 年龄-时尚关注度 & 性别差异 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">不同年龄段时尚关注度</h3>
      </div>
      <div class="card-body">
        <div id="age_radar_chart" style="width: 100%; height: 450px">{{ age_radar_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">性别时尚关注度对比</h3>
      </div>
      <div class="card-body">
        <div id="gender_chart" style="width: 100%; height: 450px">{{ gender_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 时尚洞察 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">青少年时尚消费洞察</h3>
      </div>
      <div class="card-body">
        {% for insight in fashion_insights %}
        <div class="mb-4">
          <h4 class="card-subtitle mb-2 text-primary">{{ insight.title }}</h4>
          <p class="text-muted">{{ insight.content }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}
